<!-- 
    标签组件
 -->
<template>
    <!-- 动态标签 -->
    <div>
        <div class="tag-list" ref="scrollX" @mousewheel="handelScroll">
            <template v-for="(item, index) in openTags" :key="item.fullPath">
                <el-dropdown @command="handleCommand" trigger="contextmenu" @contextmenu.native="hiddeDrop">
                    <div>
                        <el-tag @click="handleClose(index)" @close="removeTag(index)"
                            :type="item.fullPath == route.fullPath ? '' : 'info'"
                            :effect="item.fullPath == route.fullPath ? 'dark' : 'plain'"
                            :closable="item.fullPath == '/index/dashboard' ? false : true">
                            <el-icon class="icon">
                                <LocationFilled />
                            </el-icon>
                            <span>{{ $t(item.title as string) }}</span>
                        </el-tag>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :icon="RefreshRight" :command="{ code: 1, fullPath: item.fullPath }">
                                刷新
                            </el-dropdown-item>
                            <el-dropdown-item :icon="Close"
                                :disabled="index == openTags.length - 1 || openTags.length == 1"
                                :command="{ code: 2, fullPath: item.fullPath }">
                                关闭右侧标签
                            </el-dropdown-item>
                            <el-dropdown-item :icon="CircleClose" :disabled="openTags.length == 1"
                                :command="{ code: 3, fullPath: item.fullPath }">
                                全部关闭
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'//路由
import { ref, watch, computed } from 'vue'
import { useTagStore } from "@/stores/tags";
import { LocationFilled, RefreshRight, Close, CircleClose } from '@element-plus/icons-vue';//图标 

const store = useTagStore()
const route = useRoute() //实例化路由
const scrollX = ref() //标签页滚动

let openTags = computed(() => store.tagList);

watch(route, (route) => {
    if ('IndexView' !== route.matched[0].name) {
        return;
    }
    let index = -1;
    if ('GoodsCreate' === route.name || 'GoodsModify' === route.name) {
        let findIndex = openTags.value.findIndex(item => 'GoodsList' === item.name);
        if (-1 !== findIndex) {
            index = findIndex + 1;
        }
    }
    store.pushTag(route, index);
})
if ('IndexView' !== route.matched[0].name) {
    store.pushTag(route)
}

// 点击标签跳转页面
const handleClose = (index: number) => {
    store.clickTag(index)
}

// 移除标签
const removeTag = (index: number) => {
    store.removeTag(index)
}

// 标签栏滚动
const handelScroll = (e: any) => {
    console.log(e);
    const scrollLeft = scrollX.value.scrollLeft;//标签栏向右滚动的距离
    const offsetWidth = scrollX.value.offsetWidth;//标签栏的宽度
    const scrollWidth = scrollX.value.scrollWidth;//标签栏滚动的宽度
    if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) {//判断向右滚动
        scrollX.value.scrollLeft = scrollX.value.scrollLeft + 100;
    } else if (e.wheelDelta > 0 && scrollLeft > 0) {//判断向左滚动
        scrollX.value.scrollLeft = scrollX.value.scrollLeft - 100;
    }
}

// 右键标签选项的回调
const handleCommand = ({ code, fullPath }: { code: number, fullPath: string }) => {
    let tagData = openTags.value
    switch (code) {
        case 1://刷新
            let refreshIndex = tagData.findIndex((item) => item.fullPath == fullPath);
            store.refresh(refreshIndex)
            break;
        case 2://关闭右侧标签
            let index = tagData.findIndex((item) => item.fullPath == fullPath);
            store.closeRight(index);
            break
        case 3://关闭全部
            store.colseAll()
            break
    }
}
// 模拟点击事件，隐藏弹出下拉框
const hiddeDrop = () => {
    document.body.click()
}
</script>
<style lang="less" scoped>
.tag-list {
    border: 1px solid var(--el-fill-color-dark);
    display: flex;
    padding: 5px 20px;
    margin: 0px -14px 0px;
    box-shadow: var(--el-fill-color-dark) 0px 7px 4px -7px;
    overflow-x: hidden;


    &::-webkit-scroll-bar {
        display: none;
    }


    .el-tag {
        margin-right: 10px;
        border-radius: 0;
        height: 25px;
        line-height: 25px;
        cursor: pointer;

        .icon {
            vertical-align: middle;
        }
    }
}
</style>







